/* eslint-disable */
/**
 * Created by GYL on 2018/8/24
 */
import React, { Component } from 'react';
import styles from '../EventPosting.less';
import { Collapse, Icon, Select, Input, Tooltip, Form, Row, Col, TreeSelect, Tag, message, Tree } from 'antd';
import PublicService from "../../../services/PublicService";
import config from '../../../config';
import Util from '../../../utils/Util';
import request from '../../../utils/request';
import MyTable from "../../../components/common/MyTable";
import MyModal from '../../../components/common/MyModal';
const { Panel } = Collapse;
const { Option } = Select;
const { TextArea } = Input;
const FormItem = Form.Item;
const { SHOW_CHILD } = TreeSelect;
const { TreeNode } = Tree;

class Edit_Wrap extends Component {
    state = {
        expandedKeys2: [],
        autoExpandParent2: true,
        checkedKeys2: [],
        selectedKeys2: [],
        treeData2: [],
        expandedKeys: [],
        autoExpandParent: true,
        checkedKeys: [],
        selectedKeys: [],
        treeData: []
    };

    componentDidMount() {
        // console.log(this.props)
        request({
            url: `/pm-web/projectmanage/eventinfo/getTwoTree?projectId=${this.props.id}`,
            method: 'GET',
        }).then(data => {
            // console.log(data)
            this.setState({
                //   data:data.ret
                treeData: data.ret.basicTree,
                expandedKeys: data.ret.selectedIds,
                expandedKeys2: data.ret.selectedIds,
                treeData2: data.ret.selectedTree,
                checkedKeys: data.ret.selectedIds,
                checkedKeys2: data.ret.selectedIds
            })
        })
    }

    onExpand = expandedKeys => {
        // console.log('onExpand', expandedKeys);
        // if not set autoExpandParent to false, if children expanded, parent can not collapse.
        // or, you can remove all expanded children keys.
        this.setState({
            expandedKeys,
            autoExpandParent: false,
        });
    };

    onCheck = checkedKeys => {
        // console.log('onCheck', checkedKeys);
        this.setState({ checkedKeys });



    };



    onSelect = (selectedKeys, info) => {
        // console.log('onSelect', info);
        this.setState({ selectedKeys });
    };



    onExpand2 = expandedKeys2 => {
        // console.log('onExpand', expandedKeys2);
        // if not set autoExpandParent to false, if children expanded, parent can not collapse.
        // or, you can remove all expanded children keys.
        this.setState({
            expandedKeys2,
            autoExpandParent2: false,
        });
    };

    onCheck2 = checkedKeys2 => {
        // console.log('onCheck', checkedKeys2);
        this.setState({ checkedKeys2 });
    };

    onSelect2 = (selectedKeys, info) => {
        // console.log('onSelect', info);
        this.setState({ selectedKeys2:selectedKeys });
    };

    renderTreeNodes = data =>
        data.map(item => {
            if (item.children) {
                return (
                    <TreeNode title={item.title} key={item.key} icon={<Icon type={item.icon} theme={item.theme} twoToneColor={item.twoToneColor} />} selectable={item.selectable}>
                        {this.renderTreeNodes(item.children)}
                    </TreeNode>
                );
            }
            return <TreeNode {...item} icon={<Icon type={item.icon} theme={item.theme} twoToneColor={item.twoToneColor} selectable={item.selectable} />} />;
        });

    onLeft = () => {
      
        let params = {
            projectId:this.props.id,
            basicIds:this.state.checkedKeys
        }
        request({
            url: '/pm-web/projectmanage/eventinfo/addEventBasic',
            method: 'POST',
            data:params
        }).then(data => {
            if(data.rc === 0) {
                message.success('保存成功!')
                request({
                    url: `/pm-web/projectmanage/eventinfo/getTwoTree?projectId=${this.props.id}`,
                    method: 'GET',
                }).then(data => {
                    // console.log(data)
                    this.setState({
                        //   data:data.ret
                        treeData: data.ret.basicTree,
                        expandedKeys: data.ret.selectedIds,
                        expandedKeys2: data.ret.selectedIds,
                        treeData2: data.ret.selectedTree,
                        checkedKeys: data.ret.selectedIds,
                        checkedKeys2: data.ret.selectedIds
                    })
                })
            }
        })

    }

    onRight = () => {
        // console.log('向右')
    }

    render() {
        let t = this
        let width = document.body.clientWidth;
        const height = document.body.clientHeight;
        let containerHeight = '76vh';
        let tableHeight = 310;
        if (width > 1367) {
            tableHeight = 380;
            containerHeight = '83vh';
        }



        return (
            <div style={{ padding: 10 }}>
                <div className={styles.warpBox}>
                    <div style={{ flex: 1, backgroundColor: '#f6f6f18a', overflow: 'auto', display: 'flex' }}>
                        <div style={{ flex: 4, display: 'flex', alignItems: 'center', flexDirection: 'column', overflow: 'auto' }}>
                            <h2 style={{ fontSize: 14, fontWeight: 700, textAlign: 'center', borderBottom: '1px solid skyblue', width: '100%' }}>待选取</h2>
                            <div style={{ flex: 1,overflow:'auto',maxHeight:'80vh' }}>
                                <Tree
                                    showIcon
                                    checkable
                                    onExpand={this.onExpand}
                                    expandedKeys={this.state.expandedKeys}
                                    autoExpandParent={this.state.autoExpandParent}
                                    onCheck={this.onCheck}
                                    checkedKeys={this.state.checkedKeys}
                                    onSelect={this.onSelect}
                                    selectedKeys={this.state.selectedKeys}
                                    // checkStrictly={true}
                                >
                                    {this.renderTreeNodes(this.state.treeData)}
                                </Tree>
                            </div>

                        </div>
                        <div style={{ flex: 1, display: 'flex', alignItems: 'center', flexDirection: 'column', backgroundColor: '#f7f5f5', justifyContent: 'center' }}>
                            <Tag color="red" onClick={this.onLeft}>保存</Tag>
                            {/* <Tag color="geekblue" onClick={this.onRight}>向右</Tag> */}
                        </div>
                        <div style={{ flex: 4, display: 'flex', alignItems: 'center', flexDirection: 'column', overflow: 'auto' }}>
                            <h2 style={{ fontSize: 14, fontWeight: 700, textAlign: 'center', borderBottom: '1px solid skyblue', width: '100%' }}>已选取</h2>
                            <Tree
                                showIcon
                                checkable
                                onExpand={this.onExpand2}
                                expandedKeys={this.state.expandedKeys2}
                                autoExpandParent={this.state.autoExpandParent2}
                                onCheck={this.onCheck2}
                                checkedKeys={this.state.checkedKeys2}
                                onSelect={this.onSelect2}
                                selectedKeys={this.state.selectedKeys2}
                                // checkStrictly={true}
                            >
                                {this.renderTreeNodes(this.state.treeData2)}
                            </Tree>
                        </div>

                    </div>
                </div>
            </div>
        );


    }
}
export default Edit_Wrap;

